<!-- 用户注册登录页面 -->
<template>
	<view class="login">
		<view class="" style="border: 2rpx solid #fff;"></view>
		<view class="header">
			<image src="https://img0.baidu.com/it/u=1076867912,3911949475&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
				mode="widthFix"></image>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm" label-position="top" :error-type="errorType">
				<u-form-item label="用户名" :border-bottom="false" prop="username">
					<u-input type="text" v-model="form.username" border placeholder="请输入您的用户名" />
				</u-form-item>
				<u-form-item label="密码" :border-bottom="false" prop="password">
					<u-input type="password" v-model="form.password" border placeholder="请输入您的密码" />
				</u-form-item>
			</u-form>

			<view class="btn-login">
				<u-button shape="circle" type="primary" :ripple="true" @click="submit">登录</u-button>
			</view>
			<view class="btn-reg">
				<u-button shape="circle" type="primary" :ripple="true" @click="register">注册</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				errorType: ['message'], // 文字提示
				form: {
					username: uni.getStorageSync("username") || "",
					password: uni.getStorageSync("password") || ""
				},
				rules: {
					username: [{
						required: true,
						message: '请填写您的用户名',
						trigger: ['blur'],
					}],
					password: [{
						required: true,
						message: '请填写您的密码',
						trigger: ['blur'],
					}, {
						min: 6,
						required: true,
						message: '密码不能少与6位数',
						trigger: ['change'],
					}],
				}, // 规则配置
			};
		},
		onShow() {
			this.form.username = uni.getStorageSync("username") || ""
			this.form.password = uni.getStorageSync("password") || ""
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			// this.submit()
		},
		methods: {
			// 注册
			register() {
				uni.navigateTo({
					url: './register'
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (!valid) return
					this.$u.api.login(this.form).then(res => {
						uni.setStorageSync("username", this.form.username)
						uni.setStorageSync("password", this.form.password)
						this.$u.vuex('vuex_token', res.data.token);
						this.$u.vuex('vuex_user', res.data.user);
						this.$u.toast('登录成功');
						// 登录成功，重置全局数据
						getApp().globalData.answerData = {
							user_id: '',
							question_id: '',
							familiar: 0,
							analysis: 0,
							experience: 0,
							reference_data: 0,
							intuition: 0,
							max_value: '',
							max_reason: '',
							possible_value: '',
							possible_reason: '',
							min_value: '',
							min_reason: '',
							round: 0,
							radios: [],
							checkboxs: [],
							inputs: []
						}
						setTimeout(() => {
							if (res.data.user.permission === 2) {
								uni.navigateTo({
									url: '../../package_sub/pages/index/index'
								})
							} else {
								uni.switchTab({
									url: '/pages/home/home'
								})
							}
						}, 500)
					}).catch(err => {
						this.$u.toast("登录失败，请检查用户名或密码");
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.login {
		background-color: #f8f8f8;
		min-height: 100vh;

		.form {
			margin-top: 100rpx;
			margin: 60rpx 60rpx;

			.u-form {
				background-color: #fff;
				border-radius: 40rpx;
				padding: 20rpx;
			}

			.btn-login {
				margin-top: 200rpx;
			}

			.btn-reg {
				margin-top: 40rpx;
			}
		}

		.header {
			text-align: center;
			margin-top: 100rpx;

			image {
				width: 200rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>
